<template>
	<div>
		<!-- 顶部 -->
		<div class="sidebar-top">
			<div>导航栏</div>
			<div @click="signOut">退出</div>
		</div>
		<div class="sidebar-cont">
			<el-menu :default-active="ac_index" @select="Select">
				<div v-for="(item,index) in menu" :key="index">
					<router-link :to="{path:item.router}">
						<el-menu-item v-if="item.Subclass.length == 0" :index="item.id">
							<el-icon>
								<component :is="item.icon"></component>
							</el-icon>
							<span>{{item.title}}</span>
						</el-menu-item>
					</router-link>
					<!-- 二级，三级 -->
					<el-sub-menu v-if="item.Subclass.length > 0" :index="item.id">
						<template #title>
							<el-icon>
								<component :is="item.icon"></component>
							</el-icon>
							<span>{{item.title}}</span>
						</template>
						<div v-for="(two,index_two) in item.Subclass" :key="index_two">
							<router-link :to="{path:two.router}">
								<el-menu-item :index="two.id">{{two.title}}</el-menu-item>
							</router-link>
						</div>
					</el-sub-menu>
				</div>
			</el-menu>
		</div>
		<router-view></router-view>
	</div>
</template>

<script>
import {Histogram,UserFilled,CreditCard,Bowl} from '@element-plus/icons-vue'
import {shallowRef,ref,onMounted} from 'vue'
import {useRouter} from 'vue-router'
export default{
	components:{Histogram,UserFilled,CreditCard,Bowl},
	setup(){
		const router = useRouter()
		const Array = [
			{
				id:'1',
				icon:Histogram,
				title:'扁鹊',
				router:'data',
				Subclass:[]
			},
			{
				id:'2',
				icon:UserFilled,
				title:'华佗',
				router:'userpage',
				Subclass:[]
			},
			{
				id:'3',
				icon:CreditCard,
				title:'张仲景',
				router:'order',
				Subclass:[]
			},
			{
				id:'4',
				icon:Bowl,
				title:'皇甫谧',
				router:'dishes',
				Subclass:[]
			},
			{
				id:'5',
				icon:UserFilled,
				title:'葛洪',
				router:'',
				Subclass:[
					{
						id:'5-1',
						title:'人物介绍页面',
						router:'role',
					}
				]
			},
			{
				id:'6',
				icon:Histogram,
				title:'数据分析',
				router:'keshihua',
				Subclass:[]
			},
		]
	
		const menu = shallowRef(Array)
		const ac_index = ref('1')
		function Select(index,path){
			localStorage.setItem('menuid',JSON.stringify(index))
		}
		onMounted(()=>{
			ac_index.value = JSON.parse(localStorage.getItem('menuid'))
		})
		// 退出登录
		function signOut(){
			localStorage.clear()
			router.push({name:'login'})
		}
	
		return{menu,ac_index,Select,signOut}
	
	}
}
</script>

<style>
</style>
